$(function () {
    /* 公共头部处理 */
    $(".header").load("./../common/header.html", function() {
        //当加载的内容被添加之后
        let sc = document.createElement("script")
        sc.src = "./../common/js/header.js";
        document.body.appendChild(sc)
    })
    /* 公共底部处理 */
    $(".footer").load("./../common/footer.html", function() {
        //当加载的内容被添加之后
        let sc = document.createElement("script")
        sc.src = "./../common/js/footer.js";
        document.body.appendChild(sc)
    })
    

    /* 处理公共的内容区域 */
    //1.获取SVG路径的长度
    let length = $("#refreshLogo")[0].getTotalLength()
    //2.默认先隐藏路径
    $("#refreshLogo").css({ "stroke-dasharray": length })
    $("#refreshLogo").css({ "stroke-dashoffset": length })
    //创建IScroll
    let myScroll = new IScroll('.main', {
        mouseWheel: false,
        scrolbars: false,
        /* 
        需要使用is.croll-probe.js才能生效probeType:
        1滚动不繁忙的时候触发
        2滚动时每隔一定时间触发
        3每滚动一像素触发一次

        */
        probeType: 3
    })
    //4.监听滚动
    // let logoHeight = $(".pull-down").height()
    let isPullDown = false
    //防止多次刷新
    let isRefresh = false
    /* 
         由于IScroll中的数据都是从网络加载的，所以一进来IScroll中没有数据，所以一进来最大的滚动距离是0
    */
    /* 
     注意点:
     虽然我们是加载完数据才去刷新的，但是数据中有图片，并且高度依赖于图片，所以哪怕是加载完数据才去刷新计算出来的高度也不对
     所以在企业开发中如果先拿到正确的滚动范围，必须等到图片也加载完成再去刷新或者直接将高度写死  
    */
    /* 上拉 */
    myScroll.on("scroll", function () {
        if (this.y >= 0) {
            if (this.y * 2 <= length) {
                $("#refreshLogo").css({ "stroke-dashoffset": length - this.y * 2 })
            } else {
                //  console.log(this.y);
                //  console.log("画完了") 
                this.minScrollY = 124
                isPullDown = true
            }
        }
    })
    /* 下拉 */
    myScroll.on("scrollEnd", function () {
        if (isPullDown && !isRefresh) {
            isRefresh = true
            //去网络刷新数据
            refreshDown()
        }
    })
    function refreshDown() {
        setTimeout(function () {
            console.log("数据加载完成");
            isPullDown = false
            isRefresh = false
            myScroll.minScrollY = 0
            myScroll.scrollTo(0, 0)
        }, 1500)
    }

    //创建首页的轮播图Banner
    HomeApis.getHomeBanner()
        .then(function (data) {
            let html = template('bannerSlide', data)
            $(".swiper-wrapper").html(html)
            myScroll.refresh();
            /* 设置轮播图的 */
            new Swiper('.swiper', {
                autoplay: {
                    delay: 2000,
                    disableOnInteraction: false,
                },
                loop: true, // 循环模式选项

                // 如果需要分页器
                pagination: {
                    el: '.swiper-pagination',
                    bulletClass: 'my-bullet',
                    bulletActiveClass: 'my-bullet-active',
                },
                observer: true,
                observeParents: true,
                observeSlideChildren: true,
            })
        })
        .catch(function (err) {
            console.log(err);
        })

    /* 创建首导航 */
    $(".nav i").html(new Date().getDate())
    /* 创建首页分区 */
    HomeApis.getHomeRecommend()
        .then(function (data) {
            data.title = "推荐歌单"
            data.subTitle = "歌单广场"
            data.result.length = 6
            data.result.forEach(function (obj) {
                obj.width = 216 / 100
                obj.playCount = formartNum(obj.playCount)
            })
            let html = template('category', data)
            $(".recommend").html(html)
            $(".recommend .category-title").forEach(function (ele) {
                $clamp(ele, { clamp: 2 })
            })
            myScroll.refresh();
        })
        .catch(function (err) {
            console.log(err);
        })

    HomeApis.getHomeExclusive()
        .then(function (data) {
            data.title = "独家放送"
            data.subTitle = "网易出品"
            data.result.forEach(function (obj, index) {
                obj.width = 334 / 100
                if (index === 2) {
                    obj.width = 690 / 100
                }
            })
            let html = template('category', data)
            $(".exclusive").html(html)
            $(".exclusive .category-title").forEach(function (ele) {
                $clamp(ele, { clamp: 2 })
            })
            myScroll.refresh();
        })
        .catch(function (err) {
            console.log(err);
        })
    HomeApis.getHomeAlbum()
        .then(function (data) {
            data.title = "新碟新歌"
            data.subTitle = "更多"
            data.result = data["monthData"]
            data.result.length = 6
            data.result.forEach(function (obj) {
                obj.artistName = obj.artist.name
                obj.width = 216 / 100
            })
            let html = template('category', data)
            $(".album").html(html)
            $(".album .category-title").forEach(function (ele) {
                $clamp(ele, { clamp: 2 })
            })
            $(".album .category-singer").forEach(function (ele) {
                $clamp(ele, { clamp: 1 })
            })
            myScroll.refresh();
        })
        .catch(function (err) {
            console.log(err);
        })

    HomeApis.getHomeMv()
        .then(function (data) {
            data.title = "推荐MV"
            data.subTitle = "更多"
            data.result.forEach(function (obj, index) {
                obj.width = 334 / 100
            })
            let html = template('category', data)
            $(".mv").html(html)
            $(".mv .category-title").forEach(function (ele) {
                $clamp(ele, { clamp: 1 })
            })
            $(".mv .category-singer").forEach(function (ele) {
                $clamp(ele, { clamp: 1 })
            })
            myScroll.refresh();
        })
        .catch(function (err) {
            console.log(err);
        })

    HomeApis.getHomeDj()
        .then(function (data) {
            data.title = "主播电台"
            data.subTitle = "更多"
            data.result.forEach(function (obj) {
                obj.width = 216 / 100
                obj.height = 216 / 100
            })
            let html = template('category', data)
            $(".dj").html(html)
            $(".dj .category-title").forEach(function (ele) {
                $clamp(ele, { clamp: 2 })
            })
            myScroll.refresh();;
        })
        .catch(function (err) {
            console.log(err);
        });
   


})